<template>
  <div class="page_user_mgr">
    <div style="font-size: 28px; text-align: center;  padding: 20px;">{{companyInfo.name}}
    </div>
    <div style="text-align: center; color: #888;    margin-bottom: 20px;">地址：{{companyInfo.addr}}
    </div>
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="8" v-for="(infor, i) in inforCardData" :key="`infor-${i}`"
             style="height: 140px;padding: 10px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style"/>
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Row style="text-align: center;margin: 20px">
      <Button type="primary" icon="md-arrow-round-back" @click="backToList">返回</Button>
    </Row>
  </div>
</template>

<script>
  import UserApi from '@/api/userApi'
  import RoleApi from '@/api/roleApi'
  import InforCard from '_c/info-card'
  import CountTo from '_c/count-to'

  export default {
    name: "mg-user-mgr",
    components: {
      InforCard,
      CountTo
    },
    data() {
      return {
        companyInfo: {
          name: '泉州XXX健身俱乐部1',
          addr: '丰泽区宝洲路浦西万达广场XXXX健身1'
        },
        inforCardData: [
          {title: '学员数', icon: '_team', count: 1803, color: '#2d8cf0'},
          {title: '教练数', icon: 'ios-person', count: 232, color: '#19be6b'},
          {title: '场地数', icon: '_space', count: 8, color: '#ff9900'},
          {title: '设备数', icon: '_device', count: 1657, color: '#ed3f14'},
          {title: '七天活跃会员数', icon: 'md-person-add', count: 1300, color: '#E46CBB'},
          {title: '七天活跃设备数', icon: 'ios-person-add', count: 1222, color: '#9A66E4'}
        ],
        companyId: ''
      }
    },
    methods: {
      backToList() {
        this.$router.go(-1);
      }
    },
    mounted: function () {
      this.companyId = this.$route.params.companyId
    }

  }
</script>
<style>
  html, body {
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>

